import React, { Component } from "react";
import { Route, Routes, Navigate } from "react-router-dom";
import MyNavLink from "../MyNavLink";
import News from "./components/News";
import Message from "./components/Message";
export default class Home extends Component {
  render() {
    console.log("home组件接收到的属性", this.props);
    return (
      <div>
        <h2>Home组件内容</h2>

        <div>
          <ul className="nav nav-tabs">
            <li>
              <MyNavLink to="/home/news">News</MyNavLink>
            </li>
            <li>
              <MyNavLink to="/home/message">Message</MyNavLink>
            </li>
          </ul>
          <div>
            {/* 注册路由 */}
            <Routes>
              <Route path="/news" element={<News />} />
              <Route path="/message" element={<Message />} />

              {/*  Navigate重定向  */}
              <Route path="*" element={<Navigate to="/news" />} />
            </Routes>
          </div>
        </div>
      </div>
    );
  }
}
